<template>
	<div class="api-list-config">
		<a-form-item label="API接口列表">
			<a-table :columns="apiColumns" :data-source="apiList" :pagination="false" bordered size="small">
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.dataIndex === 'path'">
						<a-input v-model:value="record.path" placeholder="/api/users" @change="handleApiListChange" />
					</template>
					<template v-if="column.dataIndex === 'method'">
						<a-select v-model:value="record.method" style="width: 100%" @change="handleApiListChange">
							<a-select-option value="GET">GET</a-select-option>
							<a-select-option value="POST">POST</a-select-option>
							<a-select-option value="PUT">PUT</a-select-option>
							<a-select-option value="DELETE">DELETE</a-select-option>
						</a-select>
					</template>
					<template v-if="column.dataIndex === 'description'">
						<a-input v-model:value="record.description" placeholder="接口描述" @change="handleApiListChange" />
					</template>
					<template v-if="column.dataIndex === 'action'">
						<a-button danger type="link" @click="removeApi(index)">删除</a-button>
					</template>
				</template>
			</a-table>
			<a-button block class="mt-2" type="dashed" @click="addApi">
				<template #icon>
					<PlusOutlined />
				</template>
				添加API接口
			</a-button>
		</a-form-item>

		<!-- API预览模态框 -->
		<a-modal v-model:open="previewModalVisible" :footer="null" title="API接口预览" width="80%">
			<a-table
				:columns="previewColumns"
				:data-source="previewApiList"
				:loading="previewing"
				:pagination="{ pageSize: 10 }"
				size="small"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'method'">
						<a-tag :color="getMethodColor(record.method)">
							{{ record.method }}
						</a-tag>
					</template>
					<template v-if="column.dataIndex === 'fullUrl'">
						<a-typography-text copyable>{{ record.fullUrl }}</a-typography-text>
					</template>
				</template>
			</a-table>
		</a-modal>
	</div>
</template>

<script setup>
	import { ref, watch } from 'vue'
	import { message } from 'ant-design-vue'
	import { PlusOutlined } from '@ant-design/icons-vue'

	// Props
	const props = defineProps({
		modelValue: {
			type: Array,
			default: () => []
		},
		baseUrl: {
			type: String,
			default: ''
		}
	})

	// Emits
	const emit = defineEmits(['update:modelValue', 'change'])

	// API接口配置
	const apiList = ref([...props.modelValue])

	// API预览
	const previewModalVisible = ref(false)
	const previewApiList = ref([])
	const previewing = ref(false)

	// API列表表格列定义
	const apiColumns = [
		{
			title: 'API路径',
			dataIndex: 'path',
			width: 200
		},
		{
			title: '请求方法',
			dataIndex: 'method',
			width: 100
		},
		{
			title: '接口描述',
			dataIndex: 'description'
		},
		{
			title: '操作',
			dataIndex: 'action',
			width: 80
		}
	]

	// 预览表格列定义
	const previewColumns = [
		{
			title: 'API路径',
			dataIndex: 'path',
			width: 200
		},
		{
			title: '请求方法',
			dataIndex: 'method',
			width: 100
		},
		{
			title: '完整URL',
			dataIndex: 'fullUrl'
		},
		{
			title: '接口描述',
			dataIndex: 'description'
		}
	]

	// 监听props变化
	watch(
		() => props.modelValue,
		(newVal) => {
			apiList.value = [...(newVal || [])]
		},
		{ deep: true, immediate: true }
	)

	// 更新API列表
	const updateApiList = () => {
		emit('update:modelValue', apiList.value)
		emit('change', apiList.value)
	}

	// 处理API列表变化
	const handleApiListChange = () => {
		updateApiList()
	}

	// 添加API接口
	const addApi = () => {
		apiList.value.push({
			path: '',
			method: 'GET',
			description: ''
		})
		updateApiList()
	}

	// 删除API接口
	const removeApi = (index) => {
		apiList.value.splice(index, 1)
		updateApiList()
	}

	// 预览API列表
	const previewApis = async () => {
		try {
			previewing.value = true

			// 构建预览数据
			previewApiList.value = apiList.value.map((api) => ({
				...api,
				fullUrl: props.baseUrl + (api.path.startsWith('/') ? api.path : '/' + api.path)
			}))

			previewModalVisible.value = true
		} catch (error) {
			console.error('预览API失败:', error)
			message.error('预览API失败：' + (error.message || '未知错误'))
		} finally {
			previewing.value = false
		}
	}

	// 获取请求方法颜色
	const getMethodColor = (method) => {
		const colors = {
			GET: 'green',
			POST: 'blue',
			PUT: 'orange',
			DELETE: 'red',
			PATCH: 'purple'
		}
		return colors[method] || 'default'
	}

	// 获取API列表
	const getApiList = () => {
		return apiList.value
	}

	// 暴露方法给父组件
	defineExpose({
		getApiList,
		previewApis
	})
</script>

<style scoped>
	.api-list-config {
		padding: 0;
	}

	.mt-2 {
		margin-top: 8px;
	}
</style>
